{% extends "base.html" %}

{% block title %}系统设置 - 铃声系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-cog"></i> 系统设置
            </div>
            <div class="card-body">
                <form id="settings-form">
                    <div class="mb-4">
                        <h5><i class="fas fa-volume-up"></i> 音量设置</h5>
                        <hr>
                        <div class="row align-items-center">
                            <div class="col-md-3">
                                <label for="default-volume" class="form-label">默认音量</label>
                            </div>
                            <div class="col-md-6">
                                <input type="range" class="form-range" id="default-volume" min="0" max="100" value="80">
                            </div>
                            <div class="col-md-3">
                                <span id="volume-value" class="badge bg-primary">80%</span>
                            </div>
                        </div>
                        <div class="form-text">设置系统默认音量，范围 0-100%</div>
                    </div>
                    
                    <div class="mb-4">
                        <h5><i class="fas fa-database"></i> 数据库设置</h5>
                        <hr>
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label">数据库状态</label>
                            </div>
                            <div class="col-md-9">
                                <span id="db-status" class="badge bg-success">连接正常</span>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-3">
                                <label class="form-label">数据库路径</label>
                            </div>
                            <div class="col-md-9">
                                <div class="alert alert-light" role="alert">
                                    <span id="db-path">bell_system.db</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <h5><i class="fas fa-folder"></i> 音频文件设置</h5>
                        <hr>
                        <div class="row">
                            <div class="col-md-3">
                                <label class="form-label">音频文件目录</label>
                            </div>
                            <div class="col-md-9">
                                <div class="alert alert-light" role="alert">
                                    <span id="audio-dir">audio_files</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 添加修改密码部分 -->
                    <div class="mb-4">
                        <h5><i class="fas fa-lock"></i> 账户安全</h5>
                        <hr>
                        <div class="row">
                            <div class="col-md-3">
                                <label for="current-password" class="form-label">当前密码</label>
                            </div>
                            <div class="col-md-9 mb-3">
                                <input type="password" class="form-control" id="current-password" placeholder="请输入当前密码">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <label for="new-password" class="form-label">新密码</label>
                            </div>
                            <div class="col-md-9 mb-3">
                                <input type="password" class="form-control" id="new-password" placeholder="请输入新密码">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <label for="confirm-password" class="form-label">确认新密码</label>
                            </div>
                            <div class="col-md-9 mb-3">
                                <input type="password" class="form-control" id="confirm-password" placeholder="请再次输入新密码">
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="button" class="btn btn-secondary me-md-2" id="reset-settings">
                            <i class="fas fa-undo"></i> 恢复默认
                        </button>
                        <button type="button" class="btn btn-primary" id="save-settings">
                            <i class="fas fa-save"></i> 保存设置
                        </button>
                        <button type="button" class="btn btn-success" id="change-password">
                            <i class="fas fa-key"></i> 修改密码
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-info-circle"></i> 系统信息
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>软件信息</h6>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <strong>软件名称:</strong> 铃声系统
                            </li>
                            <li class="list-group-item">
                                <strong>版本:</strong> v1.0.0
                            </li>
                            <li class="list-group-item">
                                <strong>开发者:</strong> 铃声系统开发团队
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>系统环境</h6>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <strong>操作系统:</strong> Windows/Linux/macOS
                            </li>
                            <li class="list-group-item">
                                <strong>Python版本:</strong> 3.8+
                            </li>
                            <li class="list-group-item">
                                <strong>Web框架:</strong> Flask
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 更新音量显示
    function updateVolumeDisplay() {
        const volume = document.getElementById('default-volume').value;
        document.getElementById('volume-value').textContent = `${volume}%`;
    }
    
    // 保存设置
    function saveSettings() {
        const volume = document.getElementById('default-volume').value;
        
        // 发送保存设置请求
        fetch('/api/settings', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                default_volume: parseInt(volume)
            })
        })
        .then(response => {
            if (response.ok) {
                alert('设置保存成功');
            } else {
                throw new Error('保存设置失败');
            }
        })
        .catch(error => {
            console.error('保存设置失败:', error);
            alert('保存设置失败: ' + error.message);
        });
    }
    
    // 恢复默认设置
    function resetSettings() {
        if (confirm('确定要恢复默认设置吗？')) {
            document.getElementById('default-volume').value = 80;
            updateVolumeDisplay();
            alert('已恢复默认设置');
        }
    }
    
    // 修改密码
    function changePassword() {
        const currentPassword = document.getElementById('current-password').value;
        const newPassword = document.getElementById('new-password').value;
        const confirmPassword = document.getElementById('confirm-password').value;
        
        // 发送修改密码请求
        fetch('/api/change_password', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                current_password: currentPassword,
                new_password: newPassword,
                confirm_password: confirmPassword
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message);
                // 清空密码输入框
                document.getElementById('current-password').value = '';
                document.getElementById('new-password').value = '';
                document.getElementById('confirm-password').value = '';
            } else {
                alert('修改密码失败: ' + data.message);
            }
        })
        .catch(error => {
            console.error('修改密码失败:', error);
            alert('修改密码失败: ' + error.message);
        });
    }
    
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化音量显示
        updateVolumeDisplay();
        
        // 绑定事件
        document.getElementById('default-volume').addEventListener('input', updateVolumeDisplay);
        document.getElementById('save-settings').addEventListener('click', saveSettings);
        document.getElementById('reset-settings').addEventListener('click', resetSettings);
        document.getElementById('change-password').addEventListener('click', changePassword);
    });
</script>
{% endblock %}